/*
 * @Author: xiaosihan 
 * @Date: 2024-07-14 20:34:07 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-20 17:27:57
 */

import styles from "./adminLayer.module.less";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";

import {
    AppstoreOutlined,
    ContainerOutlined,
    DesktopOutlined,
    MailOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Menu, Modal } from 'antd';
import hashHistory from "@hashHistory";
import adminStore from "../adminStore";
import AdminLogin from "../AdminLogin/AdminLogin";
import { useLocation } from "react-router-dom";

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
    { key: '', icon: <PieChartOutlined />, label: '首页统计' },
    { key: '2', icon: <DesktopOutlined />, label: '报价大厅' },
    { key: 'adminUserManage', icon: <ContainerOutlined />, label: '用户管理' },
    { key: 'adminFactoryManage', icon: <MailOutlined />, label: '工厂管理' },
    { key: 'adminServerType', icon: <AppstoreOutlined />, label: '服务类型' },
    { key: 'adminProcessCategory', icon: <AppstoreOutlined />, label: '加工类目' },
    { key: 'adminFqsManage', icon: <AppstoreOutlined />, label: 'FQS管理' },
    { key: 'adminOrderManage', icon: <AppstoreOutlined />, label: '订单管理' },
    { key: 'loginOut', icon: <AppstoreOutlined />, label: '退出登录' },
];

interface Iprops {
    children?: ReactNode
}

// 后台管理系统布局
export default function AdminLayer(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [isLogin, setIsLogin] = useState(adminStore.isLogin);

    const pathname = useLocation().pathname.replace('/admin', '').replace('/', '');

    useEffect(() => {
        adminStore.getAdminUser();
    }, []);

    useEffect(() => autorun(() => {
        setIsLogin(adminStore.isLogin);
    }, { delay: 30 }), []);

    console.log('isLogin', isLogin);

    return (
        <div className={styles.adminLayer} >

            {isLogin === false && <AdminLogin />}

            {
                isLogin === true &&
                <div className={styles.left} >
                    <Menu
                        onSelect={(e: any) => {
                            if (["loginOut"].includes(e.key)) {
                                Modal.confirm({
                                    title: "确定要退出登录吗?",
                                    okText: "确定",
                                    onOk() {
                                        adminStore.loginOut();
                                    }
                                });
                            } else {
                                hashHistory.push(`/admin/${e.key}`);
                            }
                        }}
                        className={styles.menu}
                        defaultSelectedKeys={[pathname]}
                        defaultOpenKeys={[pathname]}
                        mode="inline"
                        theme="dark"
                        items={items}
                    />
                </div>
            }

            {
                isLogin === true &&
                <div className={styles.right} >
                    {props.children}
                </div>
            }

        </div>
    );

}